import * as echarts from 'echarts'

let isunityColor = [
  ['#063CFF', 'rgba(6, 60, 255, 0.08)'],
  ['#31C3E3', 'rgba(49, 195, 227, 0.08)'],
  ['#FF6060', 'rgba(255, 96, 96, 0.1)'],
  ['#FDB15C', 'rgba(253, 177, 92, 0.1)'],
]

const PictorialBar3Option = ({ dataList, xdata }) => {
  let options = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'none',
      },
      formatter: function (params) {
        return params[0].name + ': ' + params[0].value
      },
    },
    grid: {
      left: 40,
      top: 10,
      right: 20,
      bottom: 20,
    },
    xAxis: {
      data: xdata,
      axisTick: { show: false },
      axisLine: {
        show: false,
      },
      axisLabel: {
        color: '#8D93A7',
        interval: 0,
      },
    },
    yAxis: {
      // max: 0,
      splitLine: {
        show: true,
        lineStyle: {
          color: '#D4D6E1',
          type: 'dashed',
        },
      },
      splitNumber: 4,
      axisTick: { show: false },
      axisLine: { show: false },
      axisLabel: { show: true, itemStyle: { color: '#8D93A7' } },
    },
    series: [
      {
        name: '',
        type: 'pictorialBar',
        data: dataList,
        barCategoryGap: '-150%',
        // barGap: '-100%',
        // symbolOffset: ['20%', 0],
        // symbolPosition: 'end',
        // symbolSize: ['0%', '60%'],
        symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
        itemStyle: {
          opacity: 0.5,
          color: function (params) {
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: isunityColor[params.dataIndex][0],
              },
              {
                offset: 1,
                color: isunityColor[params.dataIndex][1],
              },
            ])
          },
        },
        emphasis: {
          itemStyle: {
            opacity: 1,
          },
        },
        z: 10,
        label: {
          show: false,
          color: '#8D93A7',
          position: 'top',
        },
      },
    ],
  }

  return options
}

export { PictorialBar3Option }
